<template>
  <div ref="contribution" class="contribution"></div>
</template>

<script>
  // 货运贡献
  export default {
    name: 'contribution',
    components: {

    },
    data() {
      return {

      }
    },
    mounted() {

      var that = this;
      that.getEchartData()
      setInterval(function(){
        that.getEchartData()
      },5000)
    },
    methods: {
      getEchartData() {
        const contribution = this.$refs.contribution;
        if (contribution) {
          const myChart = this.$echarts.init(contribution)
          var that = this;
		  that.$myHttp.post("getB2BHuoYunInfo")
		    .then(function(data0) {
		      if (data0.status == "200") {
            var titerArr=[];
            var dataArr = {};
            var dataArr1 = [];
            // console.log(data0.data.hn_huoyun)
            data0.data.hn_huoyun.forEach((item,index)=>{
              if(dataArr[item.YEAR]){
                dataArr[item.YEAR].push({MAOZHONG:item.MAOZHONG,TYPE:item.TYPE})
              }else{
                dataArr[item.YEAR] =[{MAOZHONG:item.MAOZHONG,TYPE:item.TYPE}]
              }
              if(titerArr.indexOf(item.TYPE)==-1){
                titerArr.push(item.TYPE)
              }
            })
            titerArr.push('type')

            dataArr1.push(titerArr.reverse());
            var i=1;
            for(let item in dataArr){
               dataArr1[i]=[];
              dataArr1[i][0]=item
              dataArr[item].forEach((ele,index)=>{
                if(ele.TYPE=="海运"){
                  dataArr1[i][1]=ele.MAOZHONG
                }else if(ele.TYPE=="航空"){
                  dataArr1[i][2]=ele.MAOZHONG
                }else if(ele.TYPE=="陆运"){
                  dataArr1[i][3]=ele.MAOZHONG
                }
              })
              i++;
            }
            // console.log(dataArr1)
            //填写主页内容
            const option = {
              legend: {
                orient: 'horizontal', // 'vertical'
                x: 'right', // 'center' | 'left' | {number},
                y: -that.commonFunction.fontSize(0.02), // 'center' | 'bottom' | {number}
                padding: that.commonFunction.fontSize(0.05), // [5, 10, 15, 20]
                itemGap:that.commonFunction.fontSize(0.05),
                textStyle: { //图例文字的样式
                  color: '#fff',
                  fontSize: that.commonFunction.fontSize(0.12)
                },
                itemWidth:that.commonFunction.fontSize(0.15),
                itemHeight:that.commonFunction.fontSize(0.08),
                // icon:'circle'
              },

              grid: {
                left: '2%',
                right: '10%',
                top:'20%',
                bottom: '1%',
                containLabel: true
              },

              tooltip: {},
              dataset: {
                source:  dataArr1
              },
              xAxis: {
                name:'年份',
                nameLocation:'end',
                nameTextStyle:{
                 color:'#fff',
                  fontSize:that.commonFunction.fontSize(0.1),
                   width:that.commonFunction.fontSize(0.12),
                   lineHeight:that.commonFunction.fontSize(0.14),
                },

                type: 'category',
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#c3dbff', //更改坐标轴文字颜色
                    fontSize: that.commonFunction.fontSize(0.1) //更改坐标轴文字大小
                  }
                },
                //							axisTick: {
                //								show: false
                //							},
                axisLine: {
                  lineStyle: {
                    color: '#315070' //更改坐标轴颜色
                  }
                }
              },
              yAxis: {
                name:'毛重（吨）',
                nameLocation:'end',
                nameTextStyle:{
                 color:'#fff',
                  fontSize:that.commonFunction.fontSize(0.12),
                   width:that.commonFunction.fontSize(0.12),
                },

                // axisTick: {//网刻度线
                //   show: false
                // },
                splitLine: { //网格线
                  show: false
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#c3dbff', //更改坐标轴文字颜色
                    fontSize: that.commonFunction.fontSize(0.1) //更改坐标轴文字大小
                  }
                },
                //							axisTick: {
                //								show: false
                //							},
                axisLine: {
                  lineStyle: {
                    color: '#315070' //更改坐标轴颜色
                  }
                }
              },
              // Declare several bar series, each will be mapped
              // to a column of dataset.source by default.
              series: [{
                  type: 'bar',
                  barWidth: '20%',
                  //barGap:'100%',//柱图间距
                  itemStyle: {
                    normal: {
                      color: '#00aeff'
                    }
                  }
                },
                {
                  type: 'bar',
                  //barGap:'100%',//柱图间距
                  barWidth: '20%',
                  itemStyle: {
                    normal: {
                      color: '#47f7f5'
                    }
                  }
                },
                {
                  type: 'bar',
                 // barGap:'100%',//柱图间距
                  barWidth: '20%',
                  itemStyle: {
                    normal: {
                      color: '#f9cb41'
                    }
                  }
                }
              ]
            };
            myChart.setOption(option)
            window.addEventListener("resize", function() {
              myChart.resize()
            })
		      }  else {
		        alert("数据请求错误")
		      }

		    })
		    .catch(function(error) {
		      alert(error)
		    })

        }
      },
      //			this.$on('hook:destroyed', () => {
      //				window.removeEventListener("resize", function() {
      //					myChart.resize();
      //				});
      //			})

    }
  }
</script>
<style scoped="">
  .contribution {
    width: 100%;
    height: 100%;
  }
</style>
<style scoped="">

</style>
